<template>
    <div class="progress-container">
      <!-- SVG 圆形进度条 -->
      <svg class="progress-circle" :width="size" :height="size">
        <!-- 背景圆 -->
        <circle
          class="bg-circle"
          :cx="size / 2"
          :cy="size / 2"
          :r="radius"
          stroke="#e0e0e0"
          :stroke-width="strokeWidth"
          fill="none"
        ></circle>
        <!-- 进度圆 -->
        <circle
          class="progress-bar"
          :cx="size / 2"
          :cy="size / 2"
          :r="radius"
          :stroke="color"
          :stroke-width="strokeWidth"
          fill="none"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="dashOffset"
        ></circle>
      </svg>
      <!-- 百分比文本 -->
      <div class="progress-text">{{ percent }}%</div>
    </div>
  </template>
  
  <script setup>
  import { computed, ref, watchEffect } from "vue";
  
  // Props 定义
  const props = defineProps({
    size: {
      type: Number,
      default: 100, // 默认大小
    },
    strokeWidth: {
      type: Number,
      default: 8, // 默认线宽
    },
    color: {
      type: String,
      default: "#3f9cff", // 默认颜色
    },
    value: {
      type: Number,
      default: 0, // 当前百分比值
    },
  });
  
  // 计算半径和周长
  const radius = computed(() => props.size / 2 - props.strokeWidth / 2);
  const circumference = computed(() => 2 * Math.PI * radius.value);
  
  // 动态计算 dashOffset
  const dashOffset = computed(() =>
    circumference.value - (props.value / 100) * circumference.value
  );
  
  // 百分比显示
  const percent = ref(props.value);
  
  // 监听 value 变化，更新百分比
  watchEffect(() => {
    percent.value = props.value;
  });
  </script>
  
  <style scoped>
  .progress-container {
    position: relative;
    width: v-bind(size + "px");
    height: v-bind(size + "px");
  }
  
  .progress-circle {
    transform: rotate(-90deg); /* 将圆旋转到顶部开始 */
    transform-origin: center;
  }
  
  .bg-circle {
    /* 背景圆样式 */
  }
  
  .progress-bar {
    transition: stroke-dashoffset 0.3s ease; /* 平滑过渡 */
  }
  
  .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  </style>